<template>
  <view class="page-default">
    <c-nav-bar title="你的爱好是？" type="white" bg-color="rgba(255,255,255,0.6)" />
    <view class="my-4 text-center text-#265A63 font-bold">
      你的爱好是？
    </view>
    <view class="bg-green-white mx-4 rounded-4 px-4">
      <view class="container">
        <template v-for="item in tagList" :key="item.id">
          <view class="mr-4 mt-4 rounded-6 bg-#FFFFFF px-5 py-2">
            {{ item.name }}
          </view>
        </template>
        <template v-for="item in tagList" :key="item.id">
          <view class="mr-4 mt-4 flex items-center justify-center rounded-6 bg-#02CAB1 px-5 py-2">
            <text class="text-white">
              {{ item.name }}
            </text>
            <u-icon v-if="item.type == 2" name="trash" size="22" color="#FFFFFF" class="ml-2" />
          </view>
        </template>
        <view class="mr-4 mt-4 w-20 rounded-6 bg-#FFFFFF px-5 py-2">
          <up-input placeholder="自定义输入" />
        </view>
      </view>
      <view class="mb-2">
        <u-button size="default" shape="circle" class="gradient-button mb-8 mt-8" @click="goBack">
          <text class="text-base text-white">
            提交
          </text>
        </u-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const goBack = () => {
  uni.navigateBack();
};
const tagList = ref([{
  id: 1,
  name: '篮球',
  status: false,
  type: 1,
}, {
  id: 2,
  name: '足球',
  status: false,
  type: 1,
}, {
  id: 3,
  name: '橄榄球',
  status: false,
  type: 1,
}, {
  id: 4,
  name: '外语翻译',
  status: true,
  type: 1,
}, {
  id: 5,
  name: '外语翻译',
  status: false,
}, {
  id: 6,
  name: '编程',
  status: false,
  type: 1,
}, {
  id: 7,
  name: '外语翻译',
  status: true,
  type: 1,
}, {
  id: 8,
  name: '外语翻译',
  status: true,
  type: 1,
}, {
  id: 8,
  name: '外语翻译',
  status: true,
  type: 2,
}]);
</script>

<style lang="scss" scoped>
  .page-default{
    height: 100vh;
    width: 100vw;
    background: url('@/static/images/welcome/header-bg.png') no-repeat center top ;
    background-size: 100% 50%;

  }
  .bg-green-white {
  background: rgba(255,255,255,0.3);
  /* 渐变色设置 */
}
  .container {
    display: flex;
    flex-wrap: wrap;
    // background: rgba(255,255,255,0.3);
}
:deep(.u-border){
  border-width: 0px !important;
}
:deep(.u-input){
  padding: 0px 9px !important;
}
</style>
